<div class="edit-multisig-page">
  <div class="container-fluid main">
    <div class="row">
      <div class="col-sm-8">
        <h2>{{ 'AGGREGATE_MODIFICATION_EDIT_TITLE' | translate }}</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-7">
        <div class="panel-heading">
          <h3>{{ 'AGGREGATE_MODIFICATION_MULTISIG_NAME' | translate }}</h3>
        </div>
        <div class="panel-body">
          <fieldset>
            <!-- MULTISIG ACCOUNT TO EDIT -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'AGGREGATE_MODIFICATION_EDIT_SELECT_TITLE' |translate }}: </label>
                </span>
               	<select class="form-control" ng-options="(acc.address | fmtContact:$ctrl.contacts) for acc in $ctrl._DataBridge.accountData.meta.cosignatoryOf track by acc.address" ng-model="$ctrl.formData.accountToEdit" ng-change="$ctrl.processAccountToEdit();">
               		<option value="" disabled selected> {{ 'AGGREGATE_MODIFICATION_EDIT_SELECT' | translate }}</option>
              	</select>
              </div>
            </fieldset>
            <!-- BALANCE OF ACCOUNT TO EDIT -->
            <fieldset class="form-group" ng-show="$ctrl.formData.accountToEdit">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'FORM_SIDE_BTN_BALANCE' | translate }}: </label>
                </span>
                <div class="form-control formFloat" readOnly>
                  <input class="readOnly" type="text" value="{{ ($ctrl.formData.accountToEdit.balance | fmtNemValue)[0] }}.{{ ($ctrl.formData.accountToEdit.balance | fmtNemValue)[1] }}" readOnly/>
                  <label class="floatRight"><small>XEM</small></label>
                </div>
              </div>
            </fieldset>
            <!-- COSIGN ACCOUNT TO ADD/REMOVE -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'AGGREGATE_ADD_REMOVE_TITLE' | translate }}: </label>
                </span>
                <input class="form-control"
                  type="text"
                  placeholder="{{ 'AGGREGATE_ADD_REMOVE_PLACEHOLDER' | translate }}"
                  ng-model="$ctrl.formData.cosignatoryToAdd" ng-model-options="{debounce:500}" ng-change="$ctrl.processCosignatoryToAdd();"/>
                <span class="input-group-btn addSubtract">
            		  <!-- disabled if no public key for recipient or address -->
                  <button type="button" class="btn btn-warning" ng-click="$ctrl.addCosig(1)" ng-disabled="!$ctrl.formData.cosignatoryPubKey || !$ctrl.formData.cosignatoryAddress || $ctrl.formData.cosignatoryAddress === $ctrl.formData.accountToEdit.address || !$ctrl.formData.accountToEdit">
                    <i class="fa fa-plus"></i></button>
                  <button type="button" class="btn btn-danger" ng-click="$ctrl.addCosig(2)" ng-disabled="!$ctrl.formData.cosignatoryPubKey || !$ctrl.formData.cosignatoryAddress || $ctrl.formData.cosignatoryAddress === $ctrl.formData.accountToEdit.address || !$ctrl.formData.accountToEdit">
                    <i class="fa fa-minus"></i></button>
                </span>
              </div>
            </fieldset>
            <!-- ALIAS OF COSIGN ACCOUNT TO ADD/REMOVE -->
            <fieldset class="form-group" ng-show="$ctrl.showAlias">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{'FORM_SIDE_BTN_ALIAS_OF' | translate}}: </label>
                </span>
                <input class="form-control"
                  type="text"
                  ng-model="$ctrl.aliasAddress" readOnly/>
              </div>
            </fieldset>
            <!-- NUMBER OF SIGNATORIES TO REMOVE/ADD -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
            	    <label>{{'AGGREGATE_MODIFICATION_RELATIVE_CHANGE' | translate}}: </label>
                </span>
                <input class="form-control"
                  type="number"
                  placeholder="{{'AGGREGATE_MODIFICATION_RELATIVE_CHANGE_PLACEHOLDER' | translate}}"
                  ng-model="$ctrl.formData.minCosigs" min="-64" max="64" ng-change="$ctrl.updateFee()"/>
              </div>
            </fieldset>
            <!-- TRANSACTION FEE -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{'GENERAL_FEE' | translate}}: </label>
                </span>
                <div class="form-control formFloat" readOnly>
                  <span class="feeAmount">
                    <span>{{($ctrl.formData.innerFee | fmtNemValue)[0]}}.{{($ctrl.formData.innerFee | fmtNemValue)[1]}} + {{($ctrl.formData.fee | fmtNemValue)[0]}}.{{($ctrl.formData.fee | fmtNemValue)[1]}}</span>
                  </span>
                  <label class="floatRight"><small>XEM</small></label>
                </div>
              </div>
            </fieldset>
            <!-- PASSWORD FIELD -->
            <fieldset class="form-group" ng-show="!$ctrl.useCustomAccount">
              <div class="input-group">
                <span class="input-group-btn">
                  <label ng-class="!$ctrl.common.password.length ? 'has-error': ''">{{ 'FORM_PASSWORD' | translate }}:</label>
                </span>
                <input class="form-control " type="password" placeholder="{{ 'FORM_PASSWORD_FIELD_PLACEHOLDER' | translate }}" ng-model="$ctrl.common.password" ng-class="!$ctrl.common.password.length ? 'has-error': ''"/>
              </div>
            </fieldset>
            <!-- SEND TRANSACTION -->
            <button class="btn btn-success pull-xs-right"
              type="submit" style="width:100%;" ng-disabled="$ctrl.okPressed || !$ctrl.common.password.length || !$ctrl.formData.multisigPubKey || !$ctrl.cosignatoryArray.length && !$ctrl.formData.minCosigs || !$ctrl.isMinSignaturesValid(true)" ng-click="$ctrl.send()">
              <i class="fa fa-send"></i> {{'GENERAL_SEND' | translate}}
            </button>
          </fieldset>
        </div>
      </div>

      <div class="col-md-5">
        <!-- CURRENT ACCOUNT STATS -->
        <div class="panel-heading">
          <h3>{{'AGGREGATE_SELECTED_ACCOUNT_INFO' | translate}}</h3>
        </div>
        <div class="panel-body" ng-show="$ctrl.multisigInfosData.cosignatories.length && $ctrl.formData.accountToEdit">
          <div class="row">
          <div class="col-sm-9 col-md-8 col-lg-8">
          <h5>{{'GENERAL_COSIGNATORIES' | translate}}</h5>
          <span ng-repeat="cosig in $ctrl.multisigInfosData.cosignatories">{{cosig.address}}<br></span>
          </div>
          <div class="col-sm-3 col-md-4 col-lg-4">
            <h5>{{'AGGREGATE_MIN_SIGNATURES' | translate}}</h5>
             {{$ctrl.multisigInfosData.minCosigs}}
          </div>
        </div>
        <div class="panel-body bg-info" ng-show="!$ctrl.multisigInfosData.cosignatories.length">
          <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
        </div>
      </div>
        <!-- LIST OF SIGNERS TO BE ADDED/DELETED -->
        <div class="panel-heading">
          <h3>{{ 'AGGREGATE_MODIFICATION_LIST' | translate }}</h3>
          <div style="float: right; position: relative; display: block;" ng-show="$ctrl.cosignatoryArray.length > 5"><button class="buttonStyle" ng-disabled="$ctrl.currentPage == 0" ng-click="$ctrl.currentPage = $ctrl.currentPage-1" style="background-color: transparent; border: medium none;"><span class="fa fa-chevron-left" aria-hidden="true"></span></button><b>{{$ctrl.currentPage+1}}/{{$ctrl.numberOfPages()}}</b><button class="buttonStyle" ng-disabled="$ctrl.currentPage+1 >= $ctrl.numberOfPages()" ng-click="$ctrl.currentPage = $ctrl.currentPage+1" style="background-color: transparent; border: medium none;"> <span class="fa fa-chevron-right" aria-hidden="true"></span></button></div>
        </div>
        <table class="table table-bordered table-hover table-striped table-condensed" style="table-layout:fixed">
          <thead>
            <tr>
              <th>{{ 'GENERAL_ADDRESS' | translate }}</th>
              <th>{{ 'GENERAL_ACTION' | translate }}</th>
              <th>{{ 'GENERAL_REMOVE' | translate }}</th>
            </tr>
          </thead>
        </table>
        <table class="table table-bordered table-hover table-striped table-condensed" style="table-layout:fixed" ng-show="$ctrl.cosignatoryArray.length">
          <tbody>
            <tr ng-repeat="acct in $ctrl.cosignatoryArray | reverse | startFrom:$ctrl.currentPage*$ctrl.pageSize | limitTo:$ctrl.pageSize">
              <td style="word-break:break-all">{{acct.address}}</td>
              <td ng-show="acct.type == 1">{{ 'GENERAL_ADD' | translate }}</td>
              <td ng-show="acct.type == 2">{{ 'GENERAL_REMOVE' | translate }}</td>
              <td><i class="fa fa-times" style="color:red;cursor:pointer;" ng-click="$ctrl.removeCosignFromList($ctrl.cosignatoryArray, acct)"></i></td>
            </tr>
          </tbody>
        </table>
        <div class="panel-body bg-info" ng-show="!$ctrl.cosignatoryArray.length">
          <p>{{ 'GENERAL_NO_RESULTS' | translate }}</p>
        </div>
      </div>

    </div>
  </div>
</div>
